<template>
    <div class="article_details">
        <van-nav-bar  title="" left-text="返回" right-text="" left-arrow @click-left="onClickLeft" class="fixed"/>
        <div class="article-details-cont mt46">
            <h2 class="title">{{ title }}</h2>
            <div class="music_pay_cont_icon_list">
                <div class="icon">
                    <i class="iconfont icon-bofang"></i> {{ visitnum }}
                </div>

                <div class="icon">
                    <i class="iconfont icon-shijian-"></i> {{ times }}
                </div>

                <div class="icon">
                    <i class="iconfont icon-daohanglan-9"></i> {{ author }}
                </div>

                
            </div>

            <video :src="resourcelink" controls="controls" v-if="showtype == 1 && resourcelink != ''">
                your browser does not support the video tag
            </video>

            <audio :src="resourcelink" autoplay="autoplay" preload="auto" controls="controls" v-if="showtype == 2 && resourcelink != ''" style="display:none">
                Your browser does not support the audio element.
            </audio>

            <!-- <div class="article-details-img"><img :src="img" alt=""></div> -->
            <div class="article-details-info" v-html="content"> </div>
        </div>
    </div>
</template>
<script>
import {getResponse, getResponses} from "../api"

export default {
    data(){
        return {
            img:'',
            title:'',
            content:'',
            visitnum:'',
            author:'',
            resourcelink:'',
            times:'',
            showtype:''
        }
    },
    
    methods:{
        onClickLeft() {
            this.$router.go(-1)
        },
        
        //寺庙列表
        async articleDetails(id) {	
            const data = await getResponses(`/fochina/query/articledetail/json`,{'articleid':id})
            
            
            if(data.code === '0000') {
               let idata = data.data

                this.img = idata.showpicture
                this.title = idata.title
                this.content = idata.content
                this.visitnum = idata.visitnum
                this.author = idata.author
                this.resourcelink = idata.resourcelink
                this.times = idata.publishtime

                console.log(this.times)
            } else {
                console.log(data.error)
            }
        }
    },

    mounted(){
        this.articleDetails(this.$route.query.id)
        
        this.showtype = this.$route.query.showtype || 0
    }
}
</script>
<style scoped>

.article_details {
    background-color:#fff;
    padding-bottom:0.2rem;
}

.article-details-info {
    font-family: PingFangSC-Regular;
    font-size: 0.28rem;
    color: #000000;
    text-align: justify;
    line-height: 0.4rem;
    text-indent:0.48rem;
}

.article-details-info img{
    width:6.9rem;
    height: auto;
    margin-bottom: 0.1rem;
}

.article-details-img {
    width:6.9rem;
    height: 4.26rem;
    background-color:#39a9ed;
    margin-bottom:0.2rem;
}

.article-details-img img {
    width:100%;
    height: 100%;
}

.article-details-cont {
    padding:0.2rem 0.3rem 0;
}

.article-details-cont video {
    width: 100%;
    margin-bottom:0.2rem;
}

.music_pay_cont_icon_list {
    display: flex;
    padding:0 0 0.47rem;
    justify-content: space-evenly;
    width: 100%;
    box-sizing: border-box;
}

.music_pay_cont_icon_list .icon {
    display: flex;
    align-items: center;
    font-size: 0.24rem;
    color: #999;
    flex:1;
    justify-content: center;
}

.music_pay_cont_icon_list .icon .iconfont {
    margin-right:0.12rem;
}

.article_details .title {
    font-family: PingFangSC-Medium;
    font-size: 0.36rem;
    color: #333333;
    text-align: center;
    padding:0.2rem 0 0.24rem;
}
</style>
